<template>
    <!--<section >-->
    <!--<iframe src="./static/libs/index.html" frameborder="0"  width="100%" height="100%"></iframe>-->
    <!--</section>-->
    <div style="height: 100%">
        <el-container>
            <el-container>
                <aside class="showtree1" >
                    <el-tabs v-model="treeactiveName">
                        <el-tab-pane label="工程位置" name="proItem">
                            <el-tree
                                    :data="data_position"
                                    show-checkbox
                                    node-key="id"
                                    :props="defaultProps"
                                    :render-after-expand="false"
                                    @check-change="handleCheckChange"
                                    ref="protree">
                            </el-tree>
                        </el-tab-pane>
                        <el-tab-pane label="监测项目" name="monitorItem">
                            <el-tree
                                    :data="data_type"
                                    show-checkbox
                                    node-key="id"
                                    :render-after-expand="false"
                                    :props="defaultProps"
                                    @check-change="handleCheckChange"
                                    ref="typetree">
                            </el-tree>
                        </el-tab-pane>
                    </el-tabs>
                </aside>
                <el-container class="bimviewercontainer" width="65%">
                    <el-main style=";padding: 0px;overflow-x: hidden; overflow:hidden">
                        <!--<iframe src="./static/libs/index.html" frameborder="0"  width="100%" height="99%"></iframe>-->
                        <bimviewer class="bimviewer" ref="bmCl" @monitorIdChange="getMonitorPointId" @profileIdChange="getProfileId">
                        </bimviewer>
                        <div class="measureDiv">
                            <measure class="measure" ref="measureCl" v-if="showMeasureTool" ></measure>
                        </div>
                        <navigationcontrol class="navigationcontrol" @toolEventChange="toolEventSlot"></navigationcontrol>
                        <div class="eagleMapDiv">
                            <eagleMap class="eagleMap" @sceneChange="changeScene" v-if="showEagleMap"></eagleMap>
                        </div>
                    </el-main>
                </el-container>
                    <el-aside class="chartcontainer" :width="chartPanelWidth">
		            <el-card class="profile">
                        <div slot="header" class="clearfix">
                            <span class="cygSw">监测断面</span>
                            <el-button style="float: right; padding: 3px 0" type="text"></el-button>
                        </div>
                        <div >
                            <profileChart v-bind:profileId="profileId" v-bind:profileData="profileCoData"></profileChart>
                        </div>
                    </el-card>
                    <el-card class="timeLineGraph">
                        <!--<div slot="header" class="clearfix">-->
                            <!--<span class="cygSw">断面过程线</span>-->
                            <!--<el-button style="float: right; padding: 3px 0" type="text"></el-button>-->
                        <!--</div>-->
                        <div >
                            <!--<timeLineChart v-bind:profileId="profileId" @sendprofiledata="getProfileData"></timeLineChart>-->
                            <timeLineChart v-bind:profileId="profileId" @profileCoDataChange="getProfileCoData"></timeLineChart>
                        </div>
                    </el-card>
                    <el-card class="cygSwboxCard">
                        <div slot="header" class="clearfix">
                            <span class="cygSw">监测点数据</span>
                            <el-button style="float: right; padding: 3px 0" type="text"></el-button>
                        </div>
                        <div >
                            <data-table class="datatable" v-bind:monitorPointId="monitorPointId"></data-table>
                        </div>
                    </el-card>
                </el-aside>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    import timeLineChart from './../charts/timeLineChart.vue'
    import dataTable from './../charts/dataTable.vue'
    import  navigationcontrol from  './../controls/NavigationControl.vue'
    import eagleMap from './../controls/eagleMap.vue'

    import bimviewer from './bimviewer.vue'
    import measure from './../controls/Measure.vue'
    import ProfileChart from "../charts/profileChart";
    export default {
        components: {ProfileChart, timeLineChart, dataTable, navigationcontrol, eagleMap, bimviewer, measure},
        data(){
            return{
                projectid: "1",
                showMeasureTool: false,
                showEagleMap: true,
                chartPanelWidth: "0px",
                monitorPointId: 1,
                profileCoData: null,
                profileId: 169,
                treeactiveName: 'proItem',
                profiledata: null,
                data_position: [{
                    id: 1111,
                    name: '地铁',
                    monitorItem: [{
                        id: 4,
                        name: '地铁',
                        monitorItem: [{
                            id: 9,
                            name: '沉降'
                        }, {
                            id: 10,
                            name: '沉降'
                        }]
                    }]
                }, {
                    id: 2,
                    name: '沉降',
                    monitorItem: [{
                        id: 5,
                        name: '沉降'
                    }, {
                        id: 6,
                        name: '位移'
                    }]
                }, {
                    id: 3,
                    name: '测斜',
                    monitorItem: [{
                        id: 7,
                        name: '测斜'
                    }, {
                        id: 8,
                        name: '测斜'
                    }]
                }],
                data_type: [{
                    id: 1111,
                    name: '测斜',
                    monitorItem: [{
                        id: 4,
                        name: '测斜',
                        monitorItem: [{
                            id: 9,
                            name: '测斜'
                        }, {
                            id: 10,
                            name: '测斜'
                        }]
                    }]
                }, {
                    id: 2,
                    name: '测斜',
                    monitorItem: [{
                        id: 5,
                        name: '测斜'
                    }, {
                        id: 6,
                        name: '测斜'
                    }]
                }, {
                    id: 3,
                    name: '测斜',
                    monitorItem: [{
                        id: 7,
                        name: '测斜'
                    }, {
                        id: 8,
                        name: '测斜'
                    }]
                }],
                defaultProps: {
                    children: 'child',
                    label: 'name'
                }
            }
        },
        mounted(){
            if(this.$route.query.projectId != undefined)
                this.projectId = this.$route.query.projectId.toString();
            //data_position
            this.projectModel.getProjectGroupbyPos(this.projectId).then(res =>{
                this.data_position = res;
            }).catch(err => {
                console.log(err.message)
            });
            //data_type
            this.projectModel.getProjectGroupbyType(this.projectId).then(res =>{
                this.data_type = res;
            }).catch(err => {
                console.log(err.message)
            });
            var checkIndex=[];
            for(var i=0;i<1000;i++)
                checkIndex.push(i);
            this.$refs.typetree.setCheckedKeys( checkIndex);
            this.$refs.protree.setCheckedKeys( checkIndex);
            this.profileId =164;
        },
        updated: function () {
            this.$nextTick(function () {
                // Code that will run only after the
                // entire view has been re-rendered
                var myEvent = new Event('resize');
                window.dispatchEvent(myEvent);
            });
        },
        methods:{
            // getProfileData(e){
            //     this.profiledata = e;
            // },
            getMonitorPointId(e){
                this.monitorPointId = e;
                this.getMonitorPointlatestData(e);
            },
            getProfileId(e){
                this.profileId = e;
            },
            toolEventSlot(e)
            {
                if(e === "HomeEvent")
                    this.$refs.bmCl.homeView();
                if(e === "EagleMapEvent")
                {
                    this.showEagleMap = !this.showEagleMap;
                }
                if(e == "SelectEvent")
                    this.$refs.bmCl.SelectChange();
                if(e == "MeasureEvent")
                {
                    this.showMeasureTool = !this.showMeasureTool;
                }
                if(e == "ChartPanel")
                {
                    if(this.chartPanelWidth=="0px")
                        this.chartPanelWidth = "30%";
                    else
                        this.chartPanelWidth = "0px";
                }
            },
            handleCheckChange(data, checked, indeterminate) {
                if(data.monitorType!=null)
                {
                    this.$refs.bmCl.changeMonitorItemVisibility(data.id, checked);//  data.monitorType
                }
            },
            changeScene(e){
                var pid = e;
                this.$refs.bmCl.updateScene(pid);

            },
            getMonitorPointlatestData(pid)
            {
                this.bimViewDataModel.monitorPointLatestData_dbcj(pid).then(res =>{
                    // console.log(res);
                    // console.log(res.data[0].newData.value);
                    // console.log(res.data[0].newData.date);
                    this.$refs.bmCl.monitorDate = res.data[0].newData.date;
                    this.$refs.bmCl.monitorData = res.data[0].newData.value;
                }).catch(err => {
                    console.log(err.message)
                });
            },
            getProfileCoData(e){
                console.log(e);
                this.profileCoData = e;
            },
            showCheckTable(){
                this.tableVisible = !this.tableVisible;
                //this.profileModel.kzbList(this.monitorPointId.toString()).then(res =>{
                this.profileModel.kzbList("3").then(res =>{
                    console.log(res);
                    this.$refs.cTable.tableData = res;
                }).catch(err => {
                    console.log(err.message)
                });
                this.updateHref();
            },
            updateHref(){
                this.reportHref = "";
                if(this.yearValue =="")
                {
                    this.reportWarnOpen();
                }
                this.reportHref = this.tempReportHref + this.monitorPointId.toString();
            }

        }
    }
</script>
<style>
    .content{
        background-color: #ffffff;
        width:100%;
        height: 100%;
    }
    .el-scrollbar__wrap{
        overflow-x:hidden;
    }
.bimviewercontainer{
    background-color: #D3DCE6;
    color: #333;
}
.chartcontainer{
    background-color: #475669;
    color: #333;
    overflow: hidden;
}
.profile{
    height: 30%;
    margin: 5px;
}
.profile .el-card__header{
    width: 100%;
    padding: 0px 0px;
    background-color: #ccc;
}
.profile  .el-card__body{
    padding: 0px;
}
.timeLineGraph .el-card__header{
    width: 100%;
    padding: 0px 0px;
    background-color: #ccc;
}
.timeLineGraph .el-card__body{
    padding: 0px;
}

.timeLineGraph{
    height: 40%;
    margin: 5px;
}
.cygSwboxCard .el-card__header{
    padding: 0px 0px;
    background-color: #ccc;
}
.cygSwboxCard .el-card__body{
    padding: 2px;
}
.cygSwboxCard .el-table td, .el-table th{
    padding: 2px;
}
.cygSwboxCard{
margin: 5px;
/*height: 25%;*/
}
.datatable{
    height: 25%;
    width: 100%;
    min-height: 260px;
}
.navigationcontrol{
    position: relative;
    float: left;
    left: 50%;
    bottom: 60px;
    transform: translate(-50%, 0);
}
.eagleMap{
    position: relative;
    left: 0px;
    bottom: 200px;
}
.bimviewer {
    width: 100%;
    height: 100%;
    position: relative;
}
.showtree1 {
    background: white;
    width: 15%;
    min-width: 240px;
}
/*.measure{*/
    /*position: absolute;*/
    /*height: 90px;*/
    /*width: 160px;*/
    /*left: 500px;*/
    /*bottom: 300px;*/
    /*z-index:10000;*/
    /*}*/
    .eagleMapDiv{
        position: absolute;
        bottom: 0px;
    }
    .measureDiv{
        position: absolute;
        bottom: 0px;
        height: 90px;
        z-index:10000;
        bottom: 300px;
    }
    .cygSw{
        text-align: center;
        display: block;
        font-size: 24px;
        font-weight: bold;
    }
</style>
